<template>
  <div>
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        autofocus
        autocomplete="off"
        placeholder="What needs to be done?"
        @keydown.enter="addTodo"
      />
    </header>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  methods: {
    ...mapActions("todo", ["addlist"]),
    // 新增
    addTodo(e) {
      let text = e.target.value;
      if (!text) return; 
      this.addlist(text);
      e.target.value = "";
    }
  },
  computed: {
    ...mapState("todo", ["TodoArr"])
  }
};
</script>

<style scoped>

</style>